<script>
	import github from '$lib/github.svg';
</script>

<h1 class="bg-red-50">Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

<img src={github} alt="GitHub" style="width: 40px; height: 40px;" />

<div>
	<div class="top">
		<p>top</p>
	</div>
	<div class="left">
		<p>left</p>
	</div>
	<div class="bottom">
		bottom-111111
	</div>
</div>

<style lang="scss">

  $primary-color: #e18e2d;

  $theme: dark;

  // 使用继承
  %btn {
    padding: 10px;
    background-color: #f0f0f0;
  }

  .top {
        background-color: pink;

        p {
            color: greenyellow;
        }
    }
		p {
				color: $primary-color; // 使用变量
		}

		.left {
			@extend %btn;
      background-color: #4CAF50;
    }

		// 使用判断
	@if $theme == dark {
		.bottom {
			background-color: black;
			//@apply text-red-300; // 报错
		}
	} @else {
		.bottom {
			background-color: #fff;
		}
	}
</style>
